﻿<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script type="text/javascript">

        $(window).load(function () {
            $('.clip').children().each(function (obj) {
                $(this).css('marginTop', Math.floor(parseInt($(this).parent().css('height')) / 2 - $(this).attr('height') / 2));
                $(this).css('marginLeft', Math.floor(parseInt($(this).parent().css('width')) / 2 - $(this).attr('width') / 2));
            });
        });

//        $(document).ready(function () {
//            $().jSnow({
//                vSize: '100',
//                fadeAway: true
//            });



            $('#mycarousel').jcarousel({
                wrap: 'both',
                scroll: 1,
                auto: 5,
                buttonNextHTML: null,
                buttonPrevHTML: null,
                initCallback: function (c) {
                    for (i = 0, sz = c.size(); i <= sz + 1; i++) {
                        o = $('<a>');
                        o.css('right', (sz + 1 - i) * 15 + 10);

                        switch (i) {
                            case 0:
                                o.attr('className', 'jcarousel-left');
                                o.click(function () {
                                    c.prev();
                                });
                                break;
                            case sz + 1:
                                o.attr('className', 'jcarousel-right');
                                o.click(function () {
                                    c.next();
                                });
                                break;
                            default:
                                o.attr('className', 'jcarousel-navig');
                                o.attr('rel', 'nv' + i);
                                o.click(function () {
                                    c.scroll(parseInt($(this).attr('rel').substr(2)));
                                });
                                break;
                        }

                        o.appendTo(c.container);
                    }
                },
                itemFirstInCallback: function (c, itm, idx, state) {
                    c.container.children('[rel=nv' + idx + ']').attr('className', 'jcarousel-navig-selected');
                },
                itemFirstOutCallback: function (c, itm, idx, state) {
                    c.container.children('[rel=nv' + idx + ']').attr('className', 'jcarousel-navig');
                }
            });





        });  
    </script>
    <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-82650-15']);
        _gaq.push(['_trackPageview']);

        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

    </script>
    <br />
    <br />
    <div>
        <div style="float: left; padding-left: 15px; font-family: verdana; font-size: 11px;
            line-height: 16px; color: #53514b; font-weight: bold;">
            "Speak evil of no man" - Titus 3:2
        </div>
        <div style="float: right; padding-right: 15px; font-family: verdana; font-size: 11px;
            line-height: 16px; color: #53514b; font-weight: bold;">
            "Follow peace with all men" - Hebrews 12:14
        </div>
    </div>
    <div style="clear: left;">
    </div>
    <!-- Content -->
    <div id="content">
        <!-- Picture -->
        <div id="frame" style="margin-top: 0px; padding-top: 0px;">
            <!--<img src="Images/picture.png" class="cer" alt="" />-->
            <div class="slider-wrapper theme-default">
                <div class="ribbon">
                </div>
                <div id="slider" class="nivoSlider">
                    <!--<img src="images/toystory.jpg" alt="" />
                        <a href="http://dev7studios.com">
                            <img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>-->
                    <img src="images/Slideshow Images/IMG_3929.JPG" alt="" />
                    <img src="images/Slideshow Images/IMG_3931.JPG" alt="" /><img src="images/Slideshow Images/IMG_3942.JPG"
                        alt="" /><img src="images/Slideshow Images/IMG_3959.JPG" alt="" /><img src="images/Slideshow Images/IMG_3961.JPG"
                            alt="" /><img src="images/Slideshow Images/IMG_3964.JPG" alt="" /><img src="images/Slideshow Images/IMG_3980.JPG"
                                alt="" /><img src="images/Slideshow Images/IMG_3981.JPG" alt="" /><img src="images/Slideshow Images/IMG_4003.JPG"
                                    alt="" />
                    <!--<img src="images/nemo.jpg" alt="" title="#htmlcaption" />-->
                </div>
                <!--<div id="htmlcaption" class="nivo-html-caption">
                        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
                    </div>-->
            </div>
            <!--<script type="text/javascript" src="demo/scripts/jquery-1.6.1.min.js"></script>-->
            <!--Slider from http://nivo.dev7studios.com/-->
            <script type="text/javascript" src="JS/jquery.nivo.slider.pack.js"></script>
            <script type="text/javascript">
                $(window).load(function () {
                    $('#slider').nivoSlider({
                        effect: 'fade'
                    });
                });
            </script>
        </div>
        <!-- #Picture -->
        <!-- blocks -->
        <!-- 1 -->
        <div class="align">
            <div class="block">
                <h3>
                    LATEST SERMONS</h3>
                <div>
                    <div style="margin-left: 25px; font-family: verdana; font-size: 11px; line-height: 16px;
                        color: #333;">
                        Christian growth- Pastor Adam Samuel</div>
                    <div style="margin-left: 25px;">
                        <p id="audioplayer_1">
                            Christian growth</p>
                        <script type="text/javascript">
                            AudioPlayer.embed("audioplayer_1", { soundFile: "http://www.acaperamburministries.org/Audios/July2012/Christian growth.mp3" });  
                        </script>
                    </div>
                </div>
                <div class="breakHeight">
                </div>
                <div>
                    <div style="margin-left: 25px; font-family: verdana; font-size: 11px; line-height: 16px;
                        color: #333;">
                        Sharepening the blunt edge - Pastor Adam</div>
                    <div style="margin-left: 25px;">
                        <p id="audioplayer_2">
                            Sharepening the blunt edge</p>
                        <script type="text/javascript">
                            AudioPlayer.embed("audioplayer_2", { soundFile: "http://www.acaperamburministries.org/Audios/July2012/Sharepening the blunt edge.mp3" });  
                        </script>
                    </div>
                </div>
                <div class="breakHeight">
                </div>
                <div>
                    <div style="margin-left: 25px; font-family: verdana; font-size: 11px; line-height: 16px;
                        color: #333;">
                        What to do when you dont know what to do</div>
                    <div style="margin-left: 25px;">
                        <p id="audioplayer_3">
                            What to do when you dont know what to do</p>
                        <script type="text/javascript">
                            AudioPlayer.embed("audioplayer_3", { soundFile: "http://www.acaperamburministries.org/Audios/July2012/What to do when you dont know what to do.mp3" });  
                        </script>
                    </div>
                </div>
            </div>
        </div>
        <!-- #1 -->
        <!-- 2 -->
        <div class="align">
            <div class="block">
                <h3>
                    GOSPEL MESSAGE</h3>
                <a href="HTML/Gospel.html">
                    <img src="Images/Icons/gospelicon.jpg" alt="" /></a>
                <p>
                    Salvation is a gift from God. He offers the gift through Jesus Christ, his Son.
                    By laying down His life on the Cross... <a href="HTML/Gospel.html">more </a>
                </p>
            </div>
        </div>
        <!-- #2 -->
        <!-- 3 -->
        <div class="align">
            <div class="block">
                <h3>
                    CHURCH BULLETIN</h3>
                <a href="HTML/churchbulletin_30thJune2012.html">
                    <img src="Images/block_res3.png" alt="" /></a>
                <p>
                    Pay attention to what you read. After you read this, you will know the reason it
                    was given to you... <a href="HTML/churchbulletin_30thJune2012.html">more </a>
                </p>
            </div>
        </div>
        <!-- #3 -->
        <!-- #blocks -->
        <div class="clear">
        </div>
        <!-- Right -->
        <div id="right">
            <!-- FREE NEWSLETTER -->
            <div id="news">
                <h3>
                    TODAY'S PROMISE FOR YOU</h3>
                <p style="line-height: 18px;">
                    <i>"<asp:Literal ID="ltrVerse" runat="server"></asp:Literal>"</i>
                </p>
                <br />
                <p style="float: right;">
                    <b>
                        <asp:Literal ID="ltrVerseRef" runat="server"></asp:Literal></b>
                </p>
            </div>
            <!-- #FREE NEWSLETTER -->
            <!-- BLOG ROLL -->
            <div id="blog_roll">
                <div class="bg_r">
                    <h3>
                        Messages available in CDs</h3>
                    <div class="scrolling-text-container">
                        <div class="scrolling-texts">
                            <ul>
                                <li><a href="email.aspx?cd=1">Audio messages are available in CDs<br />
                                    upon request.</a></li>
                            </ul>
                        </div>
                    </div>
                    <a class="read" href="email.aspx?cd=1">READ MORE </a>
                </div>
            </div>
            <!-- BLOG ROLL -->
        </div>
        <!-- #Right -->
        <!-- left -->
        <div id="left" style="background: url('Images/left_bg_650.png'); width: 595px; height: 650px;">
            <div id="left_content" style="margin: 0 auto;">
                <h1 style="margin-left: 23px;" id="videoTitle">
                    Pastor's Conference, ACA Purasawalkam</h1>
                <!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
                <a id="splash" class="player">
                    <%--style="display: block; width: 512px; height: 384px;"--%>
                    <!-- this will work as our splash. note that any HTML will go not just IMG tag -->
                    <img id="play_icon" src="Images/icons/play_large.png" alt="Click to play the video"
                        style="float: none; padding-top: 150px;" />
                </a>
                <p id="videoDescription" style="padding-left: 10px; font-family: verdana; font-size: 11px;
                    line-height: 16px; color: #53514b; margin-left: 14px;">
                    Message preached by Pastor Adam Samuel at Pastor's Conference, Apostolic Christian
                    Assembly, Purasawalkam, Chennai, India</p>
                <div>
                    <a class="prev" style="float: left; margin-top: 40px;">
                        <img src="Images/Icons/left-round.png" alt="Prev" />
                    </a>
                    <div class="navi">
                    </div>
                    <!-- configure entries inside playlist using standard HTML -->
                    <div class="clips video-playlist">
                        <div class="items">
                            <!-- single playlist entry -->
                            <div>
                                <a href="PastorAdam.flv">
                                    <img id="video2Thumb" src="http://www.acaperamburministries.org/Videos/Mar2012/PastorAdam.png"
                                        alt="Pastor's Conference" onclick="changeVideoTitleAndDescription('video2Thumb')"
                                        title="Message preached by Pastor Adam Samuel at Pastor's Conference, Apostolic Christian Assembly, Purasawalkam, Chennai, India"
                                        height="80" width="80" />
                                </a>
                            </div>
                            <div>
                                <a href="sisters_banquet.flv">
                                    <img id="video3Thumb" src="http://www.acaperamburministries.org/Videos/Mar2012/sisters_banquet_thumb.png"
                                        alt="Sisters' Banquet 2012 - Blessed Daughter" onclick="changeVideoTitleAndDescription('video3Thumb')"
                                        title="Sisters' Banquet 2012 - Blessed Daughter - Message preached by Sis. Harriet Ingleton at the Apostolic Christian Assembly, Perambur, Chennai, India."
                                        height="80" width="80" />
                                </a>
                            </div>
                            <div>
                                <a href="exuberant_raakaalam.flv">
                                    <img id="video4Thumb" src="http://www.acaperamburministries.org/Videos/Mar2012/exuberant_raakaalam_thumb.png"
                                        alt="Exuberant Praise - Raakaalam Bethlehem" onclick="changeVideoTitleAndDescription('video4Thumb')"
                                        title="Raakaalam Bethlehem - performed in Exuberant Praise - Sing song service at the Apostolic Christian Assembly, Perambur, Chennai, India on 18th Dec, 2011."
                                        height="80" width="80" />
                                </a>
                            </div>
                            <div>
                                <a href="exuberant_angels_appeared.flv">
                                    <img id="video5Thumb" src="http://www.acaperamburministries.org/Videos/Mar2012/exuberant_angels_appeared_thumb.png"
                                        alt="Exuberant Praise - Angels Appeared Unto Shepherds" onclick="changeVideoTitleAndDescription('video5Thumb')"
                                        title="Angels Appeared Unto Shepherds - performed in Exuberant Praise - Sing song service at the Apostolic Christian Assembly, Perambur, Chennai, India on 18th Dec, 2011."
                                        height="80" width="80" />
                                </a>
                            </div>
                            <div>
                                <a href="exuberant_mary.flv">
                                    <img id="video6Thumb" src="http://www.acaperamburministries.org/Videos/Mar2012/exuberant_mary_thumb.png"
                                        alt="Exuberant Praise - Mary Did You Know" onclick="changeVideoTitleAndDescription('video6Thumb')"
                                        dsfds fds fdsf title="Mary Did You Know - performed in Exuberant Praise - Sing song service at the Apostolic Christian Assembly, Perambur, Chennai, India on 18th Dec, 2011."
                                        height="80" width="80" />
                                </a>
                            </div>
                        </div>
                    </div>
                    <a class="next" style="float: left; margin-top: 40px;">
                        <img src="Images/Icons/right-round.png" alt="Next" /></a>
                </div>
                <div class="clear">
                </div>
                <script type="text/javascript">
                    function changeVideoTitleAndDescription(controlName) {
                        var source = document.getElementById(controlName);
                        //alert(source.title);
                        ////var videoDescription = document.getElementById('videoDescription');
                        ////videoDescription.innerHTML = source.title;                        
                        $('#videoDescription').fadeOut(function () {
                            $('#videoDescription').text(source.title);
                        });

                        $('#videoDescription').fadeIn();

                        $("#videoTitle").fadeOut(function () {
                            $('#videoTitle').text(source.alt);
                        });
                        $('#videoTitle').fadeIn();
                    }
                </script>
                <!-- let rest of the page float normally -->
                <br clear="all" />
                <script type="text/javascript">
                    $(function () {
                        // set up player without "internal" playlists
                        $f("splash", "Content/flowplayer-3.2.7.swf", {
                            clip: { baseUrl: 'http://www.acaperamburministries.org/Videos/Mar2012',
                                autoPlay: false,
                                autoBuffering: true,
                                onFail: function () {
                                    document.getElementById("info").innerHTML =
			                    "You need the latest Flash version to see these videos. " +
			                    "Your version is " + this.getVersion();
                                }
                            }


                            // use playlist plugin. again loop is true
                        }).playlist("div.video-playlist", { loop: true });

                        $("div.video-playlist").scrollable({

                            onBeforeSeek: function () {
                                console.info("jou");
                            },
                            size: 5,
                            circular: true

                        }).data("video-playlist")

                    });

                    $(".player").hover(function () {
                        // find div.info element inside the player container and show it
                        $("#play_icon", this).fadeTo("slow", 0.5);
                    },
                    function () {
                        // when mouse is removed - hide the info
                        $("#play_icon", this).fadeTo("slow", 1);
                    });
                    // initially all info elements are hidden
                    $("#play_icon").css("opacity", 1);
                </script>
            </div>
        </div>
        <!-- #left -->
    </div>
    <!-- #Content -->
    <div class="clear">
    </div>
</asp:Content>
